
import React from 'react';
import * as THREE from 'three';
import Controller from 'Controller';
import { Card, Form, InputNumber } from "antd";
import { useElement } from "tools/hooks/useElement";
import { useProperty } from 'tools/hooks/useProperty';
import SelectTarget from 'components/SelectTarget';
import threeToMap from 'tools/fns/threeToMap';


/**
 * 聚光灯 
 * 光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大 
 **/
export default function SpotLightCard() {

    const { element } = useElement();

    const threeController = Controller.instance.useMemo(s => s.threeController, []);

    const elementMap = threeController.useMemo(s => s.elementMap, []);

    const light = React.useMemo<THREE.Light | undefined>(() => {
        if (!element) return undefined
        if (element.type === 'light') {
            return element.object3D as THREE.Light;
        }
    }, [element])

    const spotLight = React.useMemo<THREE.SpotLight | undefined>(() => {
        if (light instanceof THREE.SpotLight) {
            return light
        } else {
            return undefined;
        }
    }, [light])

    const { setProperty } = useProperty(spotLight)

    if (!spotLight) return <></>;
    return (
        <Card title="聚光灯">
            <Form
                layout="horizontal"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
            >
                <Form.Item label='角度' tooltip='从聚光灯的位置以弧度表示聚光灯的最大范围'>
                    <InputNumber
                        bordered={false}
                        size='small'
                        style={{ width: '100%' }}
                        value={spotLight.angle}
                        max={Math.PI / 2}
                        step={Math.PI / 30}
                        onChange={setProperty('angle')}
                    />
                </Form.Item>

                <Form.Item label='阴影质量' tooltip='灯光沿灯光距离变暗的量' >
                    <InputNumber
                        bordered={false}
                        size='small'
                        style={{ width: '100%' }}
                        value={spotLight.decay}
                        onChange={setProperty('decay')}
                    />
                </Form.Item>

                <Form.Item label='距离' tooltip='如果非零，那么光强度将会从最大值当前灯光位置处按照距离线性衰减到0'>
                    <InputNumber
                        bordered={false}
                        size='small'
                        style={{ width: '100%' }}
                        value={spotLight.distance}
                        onChange={setProperty('distance')}
                    />
                </Form.Item>

                <Form.Item label='光功率' tooltip='表示以"流明（光通量单位）"为单位的光功率'>
                    <InputNumber
                        bordered={false}
                        size='small'
                        style={{ width: '100%' }}
                        value={spotLight.power}
                        onChange={setProperty('power')}
                    />
                </Form.Item>

                <Form.Item label='目标'>
                    <SelectTarget
                        uuid={threeToMap(elementMap, spotLight.target.uuid)}
                        onChange={e => { spotLight.target = elementMap.get(e)?.getObject3D() || new THREE.Object3D() }}
                    />
                </Form.Item>
            </Form>
        </Card>
    )
}